<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="$router.push({ name: 'createMenu' })"
          >添加菜单</el-button
        >
      </div>

      <el-table :data="tableData" style="width: 100%">
         <el-table-column type="index"  label="编号"></el-table-column>
        <el-table-column prop="name" label="菜单名称">
        </el-table-column>
        <el-table-column prop="level" label="菜单级数">
        </el-table-column>
        <el-table-column prop="icon" label="前端图标">
        </el-table-column>
        <el-table-column prop="orderNum" label="排序">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAllMenu, deleteMenu } from '@/services/menu'

export default {
  name: 'LoginIndex',
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    async loadMenu () {
      const { data } = await getAllMenu()
      this.tableData = data.data
    },
    handleEdit (index, row) {
      console.log(index, row)
      this.$router.push(`/menu/${row.id}/edit`)
    },
    handleDelete (index, row) {
      this.$confirm('确定删除吗', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 发送删除请求
        const { data } = await deleteMenu(row.id)
        if (data.code === '000000') {
          this.$message.success('删除成功')
        }
        this.loadMenu()
      }).catch(() => {
        // 取消
        this.$message.info('已取消删除')
      })
    }
  },
  created () {
    this.loadMenu()
  }
};
</script>

<style lang="scss" scoped>
</style>
